<template>
  <div class="pay">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="pay-wrap">
      <div class="item">
        <div class="tag">帐号</div>
        <div class="name">{{ nickPhone | formatMask }}</div>
      </div>
      <div class="item">
        <div class="tag">密码</div>
        <div class="name">{{ exist == 0 ? '未设置' : '******' }}</div>
        <div class="btn" @click="chengePassPopup(0)" v-if="exist === 0">设置</div>
        <div class="btn" @click="chengePassPopup(1)" v-else>修改</div>
      </div>
    </div>

    <!-- 设置/修改密码弹窗 -->
    <el-dialog
      class="pass-popup"
      :title="passPopupStatus === 0 ? '设置密码' : '修改密码'"
      :visible.sync="passPopupVisible"
      width="450px"
      top="25vh"
    >
      <div class="pass-wrap">
        <div class="tab" v-if="passPopupStatus !== 0">
          <span class="item" :class="{ active: passPopupStatus === 1 }" @click="chengePassPopup(1)"
            >原密码验证</span
          >
          <span class="item" :class="{ active: passPopupStatus === 2 }" @click="chengePassPopup(2)"
            >短信验证码验证</span
          >
        </div>

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          size="small"
          label-width="80px"
          v-show="passPopupStatus == 0 || passPopupStatus == 2"
        >
          <el-form-item label="手机号">
            {{ nickPhone | formatMask }}
          </el-form-item>
          <el-form-item label="验证码" prop="verify">
            <div class="verify-item">
              <el-input v-model="ruleForm.verify" placeholder="请输入验证码"></el-input>
              <EduVerificationCode
                @start="sendSetPassCode"
                class="sed"
                btnType="text"
              ></EduVerificationCode>
            </div>
          </el-form-item>
          <el-form-item label="新密码" prop="newPass">
            <el-input
              type="password"
              v-model="ruleForm.newPass"
              placeholder="请输入6位数字"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              placeholder="再次输入新密码"
            ></el-input>
          </el-form-item>
        </el-form>

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormPwd"
          size="small"
          label-width="80px"
          v-show="passPopupStatus == 1"
        >
          <el-form-item label="原密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              placeholder="请输入6位数字"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPass">
            <el-input
              type="password"
              v-model="ruleForm.newPass"
              placeholder="请输入6位数字"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              placeholder="再次输入新密码"
            ></el-input>
          </el-form-item>
        </el-form>

        <el-button class="btn" type="primary" size="small" @click="submit('ruleForm')"
          >完成</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'spark-md5'
import MyTabs from '../components/myTab.vue'
import EduVerificationCode from '@/components/EduVerificationCode'
import { mapState } from 'vuex'
export default {
  components: {
    MyTabs,
    EduVerificationCode
  },
  data() {
    var newPass = (rule, value, callback) => {
      let reg = /^\d{6}$/
      if (!reg.test(value)) {
        callback(new Error('请输入6位纯数字密码'))
      } else {
        callback()
      }
    }
    // 确认密码
    var confirmPass = (rule, value, callback) => {
      if (value !== this.ruleForm.newPass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          path: '/my/profile/my_account',
          title: '修改密码'
        },
        {
          path: '/my/profile/payPwd',
          title: '支付密码'
        },
        {
          path: '/my/profile/thirdlogin',
          title: '第三方绑定'
        }
      ],
      passPopupStatus: 0, // 0设置密码,1原密码修改,2短信验证修改
      passPopupVisible: false,
      ruleForm: {
        verify: '',
        pass: '',
        newPass: '',
        checkPass: ''
      },
      rules: {
        verify: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { min: 4, max: 6, message: '请输入验证码', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '原密码不能为空', trigger: 'blur' },
          { validator: newPass, trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { validator: newPass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: confirmPass, trigger: 'blur' }
        ]
      },
      exist: -1
    }
  },
  computed: {
    ...mapState('user', {
      nickPhone: state => state.info.phone
    }),
    routePath() {
      return this.$route.path
    }
  },
  created() {
    // 获取支付密码的状态
    this.$api.getBalancePwd(res => {
      const { data } = res
      this.exist = data.exist
    })
  },
  methods: {
    // 显示密码弹窗
    chengePassPopup(num) {
      this.passPopupVisible = true
      // 用户忘记密码跳转过来的，用户必须是设置过密码
      if (this.$route.hash && this.exist == 1) {
        this.passPopupStatus = 2
      } else {
        this.passPopupStatus = num
      }
      this.$nextTick(function() {
        if (this.passPopupStatus == 1) {
          this.$refs['ruleFormPwd'].resetFields()
        } else {
          this.$refs['ruleForm'].resetFields()
        }
      })
    },
    // 设置密码弹窗发送验证码
    sendSetPassCode() {
      var that = this
      this.$api.createSmsVerify(
        { phone: that.nickPhone, type: 'bpwd' },
        res => {
          that.$message.success(res.msg)
        },
        error => {
          that.$message.error(error.msg)
        }
      )
    },
    // 提交
    submit(formName) {
      if (this.passPopupStatus == 0) {
        this.$refs['ruleForm'].validate((valid, obj) => {
          if (valid) {
            this.$api.createBalancePwd(
              {
                phone: this.nickPhone,
                password: md5.hash(this.ruleForm.newPass),
                code: this.ruleForm.verify
              },
              res => {
                this.passPopupVisible = false
                this.exist = 1
                this.$message.success(res.msg)
              },
              err => {
                this.passPopupVisible = false
                this.$message.error(err.msg)
              }
            )
          } else {
            return false
          }
        })
      } else if (this.passPopupStatus == 1) {
        this.$refs['ruleFormPwd'].validate((valid, obj) => {
          if (valid) {
            this.$api.updateBalancePwd(
              {
                verify_type: 1,
                password: md5.hash(this.ruleForm.newPass),
                original_pwd: md5.hash(this.ruleForm.pass)
              },
              res => {
                this.passPopupVisible = false
                this.$message.success(res.msg)
              },
              err => {
                this.passPopupVisible = false
                this.$message.error(err.msg)
              }
            )
          } else {
            return false
          }
        })
      } else if (this.passPopupStatus == 2) {
        this.$refs['ruleForm'].validate((valid, obj) => {
          if (valid) {
            this.$api.updateBalancePwd(
              {
                verify_type: 2,
                phone: this.nickPhone,
                code: this.ruleForm.verify,
                password: md5.hash(this.ruleForm.newPass)
              },
              res => {
                this.passPopupVisible = false
                this.$message.success(res.msg)
              },
              err => {
                this.passPopupVisible = false
                this.$message.error(err.msg)
              }
            )
          } else {
            return false
          }
        })
      }
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pay {
  .pay-wrap {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .tag {
        font-size: 12px;
        font-weight: 400;
        color: #606266;
        margin-right: 20px;
      }
      .name {
        font-size: 13px;
        font-weight: 400;
        color: #909399;
      }
      .btn {
        margin-left: 10px;
        font-size: 13px;
        font-weight: 400;
        @include edu-color-auxiliary;
        cursor: pointer;
      }
    }
  }
  .pass-popup {
    ::v-deep .el-dialog__header {
      border-bottom: 1px solid #ebeef5;
    }
  }
  .pass-wrap {
    .el-form {
      width: 324px;
    }
    .verify-item {
      display: flex;
      border-radius: 4px;
      border: 1px solid #d8dce6;
      .el-input {
        flex: 1;
        ::v-deep .el-input__inner {
          border: none;
        }
      }
      .sed {
        padding-left: 12px;
        padding-right: 12px;
      }
    }
    .tab {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
      .item {
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        cursor: pointer;
        &.active {
          @include edu-color-auxiliary;
        }
      }
    }
    .btn {
      display: block;
      margin: 40px auto 0;
      padding: 8px 34px;
    }
  }
}
</style>
